<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <link rel="stylesheet" href="./static/bootstrap.min.css">
  <script src="./static/bootstrap.min.js"></script>
  <style>
    body {
      width: 100vw;
      height: 100vh;
      margin: 0;
      overflow-y: scroll;
      overflow-x: hidden;
      background-color: antiquewhite;
      color:#ccc;
    }

    h1{
      color: black;
      text-indent: 1rem;
    }

    .row-container{
      display: flex;
      flex-wrap: wrap;
    }

    .box-container{
      width: 16rem;
      margin: 10px;
      border-radius: 10px;
      color: black;
    }
    .card-img{
      width: 100%;
      height:12rem;
      cursor: pointer;
    }
    .card-body{
      padding: 10px;
    }
    .card-text{
      text-indent: 1rem;
    }
    .flex{
      display: flex;
    }
    .card-title > .badge{
      font-size: small;
      position: absolute;
      right: 10px;
    }

    .split-title{
      font-size: larger;
      margin: 10px auto;
      width: fit-content;
      font-weight: 600;
      text-indent: 0;
      padding: 2px 4px;
      border-radius: 2px;
      text-align: center;
    }

  </style>
</head>
<body>
  <h1 class="split-title">完整例子</h1>
  <div class="row-container">

    <div class="card box-container" >
      <a href="./a-dismantling.html" target="_blank">
        <img src="./static/img/a-dismantling.webp" class="card-img">
      </a>
      <div class="card-body" >
        <h5 class="card-title">模型拆解</h5>
        <p class="card-text">元器件拆解的动画效果，常见于介绍具体产品。<a target="_blank" href="https://www.scaugreen.cn/posts/2544/">【教程】</a></p>
      </div>
    </div>

    <div class="card box-container" >
      <a href="./b-city.html" target="_blank">
        <img src="./static/img/b-city.webp" class="card-img">
      </a>
      <div class="card-body" >
        <h5 class="card-title">智慧城市</h5>
        <p class="card-text">智慧城市常见于各种大数据的展示界面。<a target="_blank" href="https://www.scaugreen.cn/posts/46791/">【教程】</a></p>
      </div>
    </div>

    <div class="card box-container" >
      <a href="./c-global.html" target="_blank">
        <img src="./static/img/c-global.webp" class="card-img">
      </a>
      <div class="card-body" >
        <h5 class="card-title">地球数据流</h5>
        <p class="card-text">地球模型的数据流效。<a target="_blank" href="https://www.scaugreen.cn/posts/15060/">【教程】</a></p>
      </div>
    </div>

    <div class="card box-container" >
      <a href="http://3diot.scaugreen.cn" target="_blank">
        <img src="./static/img/datacenter.webp" class="card-img">
      </a>
      <div class="card-body" >
        <h5 class="card-title">数据中心设备房<span class="badge bg-primary rounded-pill">高级</span></h5>
        <p class="card-text">开机柜门、容量模式、热力场等多种效果。<a target="_blank" href="https://www.scaugreen.cn/posts/19890/">【教程】</a></p>
      </div>
    </div>


  </div>
 


  <h1 class="split-title">基础例子</h1>

  <div class="row-container">

    <div class="card box-container" >
      <a href="./1-model.html" target="_blank">
        <img src="./static/img/1-model.webp" class="card-img">
      </a>
      <div class="card-body" >
        <h5 class="card-title">1.模型制作</h5>
        <p class="card-text">基础模型的制作、贴图、加载显示。<a target="_blank" href="https://www.scaugreen.cn/posts/42378/">【教程】</a></p>
      </div>
    </div>

    <div class="card box-container" >
      <a href="./1-model.html" target="_blank">
        <img src="./static/img/4-animation.webp" class="card-img">
      </a>
      <div class="card-body" >
        <h5 class="card-title">2.模型数据</h5>
        <p class="card-text">讲解模型数据，没有例子。<a target="_blank" href="https://www.scaugreen.cn/posts/45270/">【教程】</a></p>
      </div>
    </div>

    <div class="card box-container" >
      <a href="./3-light-trail.html" target="_blank">
        <img src="./static/img/3-light-trail.webp" class="card-img">
      </a>
      <div class="card-body" >
        <h5 class="card-title">3.光线痕迹</h5>
        <p class="card-text">讲解模型数据，没有例子。<a target="_blank" href="https://www.scaugreen.cn/posts/5988/">【教程】</a></p>
      </div>
    </div>

    <div class="card box-container" >
      <a href="./4-animation.html" target="_blank">
        <img src="./static/img/4-animation.webp" class="card-img">
      </a>
      <div class="card-body" >
        <h5 class="card-title">4.动画</h5>
        <p class="card-text">讲解如何加载模型中的动画数据。<a target="_blank" href="https://www.scaugreen.cn/posts/60366/">【教程】</a></p>
      </div>
    </div>

    <div class="card box-container" >
      <a href="./5-animation-picture.html" target="_blank">
        <img src="./static/img/5-animation-picture.webp" class="card-img">
      </a>
      <div class="card-body" >
        <h5 class="card-title">5.显示动态图</h5>
        <p class="card-text">讲解如何显示动态图。<a target="_blank" href="https://www.scaugreen.cn/posts/52736/">【教程】</a></p>
      </div>
    </div>

    <div class="card box-container" >
      <a href="./6-calculate-position.html" target="_blank">
        <img src="./static/img/6-calculate-position.webp" class="card-img">
      </a>
      <div class="card-body" >
        <h5 class="card-title">6.屏幕坐标转换</h5>
        <p class="card-text">讲解threejs中的屏幕坐标与3D坐标的转换。<a target="_blank" href="https://www.scaugreen.cn/posts/56155/">【教程】</a></p>
      </div>
    </div>

    <div class="card box-container" >
      <a href="./7-open-door.html" target="_blank">
        <img src="./static/img/7-open-door.webp" class="card-img">
      </a>
      <div class="card-body" >
        <h5 class="card-title">7.开关门</h5>
        <p class="card-text">讲解修改模型的不动点，实现开关门效果。<a target="_blank" href="https://www.scaugreen.cn/posts/48386/">【教程】</a></p>
      </div>
    </div>

    <div class="card box-container" >
      <a href="./8-focus.html" target="_blank">
        <img src="./static/img/8-focus.webp" class="card-img">
      </a>
      <div class="card-body" >
        <h5 class="card-title">8.聚焦靠近</h5>
        <p class="card-text">讲解让摄像头聚集靠近一个物体。<a target="_blank" href="https://www.scaugreen.cn/posts/30581/">【教程】</a></p>
      </div>
    </div>

    <div class="card box-container" >
      <a href="./9-capacity-model.html" target="_blank">
        <img src="./static/img/9-capacity-model.webp" class="card-img">
      </a>
      <div class="card-body" >
        <h5 class="card-title">9.容量模式</h5>
        <p class="card-text">讲解实现根据容量百分比填充颜色。<a target="_blank" href="https://www.scaugreen.cn/posts/59091/">【教程】</a></p>
      </div>
    </div>

    <div class="card box-container" >
      <a href="./10-curve-move.html" target="_blank">
        <img src="./static/img/10-curve-move.webp" class="card-img">
      </a>
      <div class="card-body" >
        <h5 class="card-title">10.曲线移动</h5>
        <p class="card-text">讲解曲线移动的相关效果。<a target="_blank" href="https://www.scaugreen.cn/posts/62843/">【教程】</a></p>
      </div>
    </div>


  </div>





  <h1 class="split-title">其它例子</h1>
  <div class="row-container">

    <div class="card box-container" >
      <a href="./wireframe-transfer-effect.html" target="_blank">
        <img src="./static/img/wireframe-transfer-effect.webp" class="card-img">
      </a>
      <div class="card-body" >
        <h5 class="card-title">线框转换<span class="badge bg-warning rounded-pill">待优化</span></h5>
        <p class="card-text">从实体切到线框的过渡效果。<a target="_blank" href="https://www.scaugreen.cn/posts/3280/">【教程】</a></p>
      </div>
    </div>

    <div class="card box-container" >
      <a href="./points-flow.html" target="_blank">
        <img src="./static/img/points-flow.webp" class="card-img">
      </a>
      <div class="card-body" >
        <h5 class="card-title">点流动</h5>
        <p class="card-text">顶点流动效果</p>
      </div>
    </div>

    <div class="card box-container" >
      <a href="./limit-test-geometry.html" target="_blank">
        <img src="./static/img/limit-test-geometry.webp" class="card-img">
      </a>
      <div class="card-body" >
        <h5 class="card-title">测试渲染数量</h5>
        <p class="card-text">在30FPS前，不断增加顶点,测试渲染数量能达到多少。</p>
      </div>
    </div>

    <div class="card box-container" >
      <a href="./change-face-material.html" target="_blank">
        <img src="./static/img/change-face-material.webp" class="card-img">
      </a>
      <div class="card-body" >
        <h5 class="card-title">动态改变面的材质</h5>
        <p class="card-text">点击物体的表面，动态改变面的材质。</p>
      </div>
    </div>

    <div class="card box-container" >
      <a href="./lattice-effect.html" target="_blank">
        <img src="./static/img/lattice-effect.webp" class="card-img">
      </a>
      <div class="card-body" >
        <h5 class="card-title">点阵效果</h5>
        <p class="card-text">点阵效果</p>
      </div>
    </div>

    <div class="card box-container" >
      <a href="./fresnel.html" target="_blank">
        <img src="./static/img/fresnel.webp" class="card-img">
      </a>
      <div class="card-body" >
        <h5 class="card-title">fresnel效果</h5>
        <p class="card-text">fresnel效果</p>
      </div>
    </div>

    <div class="card box-container" >
      <a href="./metal.html" target="_blank">
        <img src="./static/img/metal.webp" class="card-img">
      </a>
      <div class="card-body" >
        <h5 class="card-title">金属材质效果</h5>
        <p class="card-text">金属材质效果</p>
      </div>
    </div>

    <div class="card box-container" >
      <a href="./apng-texture.html" target="_blank">
        <img src="./static/img/apng-texture.webp" class="card-img">
      </a>
      <div class="card-body" >
        <h5 class="card-title">apng材质</h5>
        <p class="card-text">播放apng的材质</p>
      </div>
    </div>

    <div class="card box-container" >
      <a href="./building-color.html" target="_blank">
        <img src="./static/img/points-flow.webp" class="card-img">
      </a>
      <div class="card-body" >
        <h5 class="card-title">建筑颜色分层<span class="badge bg-warning rounded-pill">待优化</span></h5>
        <p class="card-text">建筑从下至下颜色分层，达到层次感。</p>
      </div>
    </div>

  </div>
  
</body>
<script src="./static/js/add-github-icon.js"></script>

</html>